<template>
  <el-container>
    <!-- 根据 showSidebarAndHeader 决定是否显示 Header 和 Sidebar -->
    <Header v-if="showSidebarAndHeader" />
    <el-container v-if="showSidebarAndHeader" style="margin-top: 60px;"> 
      <Sidebar />
      <el-main>
        <router-view />
      </el-main>
    </el-container>
    <!-- 当 showSidebarAndHeader 为 false 时，直接显示 router-view -->
    <router-view v-else />
  </el-container>
</template>

<script setup>
import { ref, onBeforeMount } from 'vue';
import { useRouter } from 'vue-router';
import Sidebar from './components/Sidebar.vue';
import Header from './components/Header.vue';

// 定义响应式变量 showSidebarAndHeader
const showSidebarAndHeader = ref(true);
const router = useRouter();

// 在组件挂载前添加全局前置守卫
onBeforeMount(() => {
  router.beforeEach((to, from, next) => {
    // 判断当前路由是否为 404 页面
    if (to.name === 'NotFound') {
      showSidebarAndHeader.value = false;
    } else {
      showSidebarAndHeader.value = true;
    }
    next();
  });
});
</script>

<style>
body {
  margin: 0;
  font-family: Arial, sans-serif;
}

.el-container {
  height: 100vh;
}

.el-main {
  padding: 20px;
  background-color: #f5f7fa;
}
</style>